<template>
  <view class="container">
    <view class="container-info">
      <view class="state-title">
        <dict-tag :options="dict.type.refund_order_state" :value="orderInfo.checkOutOrder.refundOrderState"
                  v-if="orderInfo.orderState==107||orderInfo.orderState==108"/>
        <dict-tag :options="dict.type.audit_process" :value="orderInfo.orderAuditRecord.auditProcess"
                  v-if="orderInfo.orderState==103||orderInfo.orderState==104||orderInfo.orderState==105"/>
      </view>
      <view class="state-tip">
        {{ tipFormater(orderInfo.orderState) }}
      </view>
      <view class="main-box house-box">
        <view class="flex  align-center">
          <image class="house-img" :src="orderInfo.apartmentPictureList[0]" mode="aspectFill">
          </image>
          <view class="house-box-right">
            <view class="house-title">{{ orderInfo.housingAllocation.apartmentDescription }}</view>
            <view class="tip-title">{{ orderInfo.premisesAddress }}</view>
            <view class="tip-title">{{ orderInfo.housingAllocation.title }}</view>
          </view>
        </view>
        <view class="flex align-center justify-between" style="padding: 0 4rpx;margin-top: 26rpx;">
          <view class="btn-box flex align-center justify-center" @click="toMap">
            <image src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/tomap.png" mode="">
            </image>
            <text>酒店导航</text>
          </view>
          <view class="btn-box flex align-center justify-center" @click="callPhone">
            <image src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/callphone.png"
                   mode=""></image>
            <text>联系房东</text>
          </view>
        </view>
      </view>
      <template v-if="type==0">
        <view class="main-box" v-if="orderInfo.orderAuditRecord && orderInfo.orderAuditRecord.auditRecordState === '3'">
          <view class="main-title"></view>
          <view class="flex justify-between">
            <text class="left-title">驳回原因</text>
            <text class="right-price" v-if="orderInfo.orderAuditRecord">
              {{ orderInfo.orderAuditRecord ? orderInfo.orderAuditRecord.remark : '' }}
            </text>
          </view>
        </view>
        <view class="main-box">
          <view class="main-title">退订费用</view>
          <view class="flex justify-between">
            <text class="left-title">退款金额</text>
            <text class="right-price">￥{{ orderInfo.refundAmount || 0 }}</text>
          </view>
          <view class="flex justify-between" v-if="orderInfo.couponPrice">
            <text class="left-title">优惠券</text>
            <text class="right-price" style="color: #E0001B;">-￥{{ orderInfo.couponPrice }}</text>
          </view>
        </view>
        <view class="main-box">
          <view class="main-title">退订信息</view>
          <view class="flex justify-between">
            <view class="left-title">入离日期</view>
            <view class="right-text">{{ orderInfo.checkInTime|formatDate('MM月dd日') }} -
              {{ orderInfo.checkOutTime|formatDate('MM月dd日') }}
            </view>
          </view>
          <view class="flex justify-between">
            <view class="left-title">入住天数</view>
            <text class="right-text">{{ subDay }}晚</text>
          </view>
          <view class="flex justify-between" v-if="orderInfo.orderStateRecord">
            <view class="left-title">退订原因</view>
            <text class="right-text">{{ orderInfo.orderStateRecord.recordReason }}</text>
          </view>
          <view class="flex justify-between">
            <view class="left-title">退订单号</view>
            <text class="right-text">{{ orderInfo.orderId }}</text>
          </view>
          <view class="flex justify-between">
            <view class="left-title">申请时间</view>
            <text class="right-text">{{ orderInfo.createTime }}</text>
          </view>
        </view>
      </template>
      <template v-if="type==1">
        <view class="main-box" v-if="orderInfo.orderAuditRecord && orderInfo.orderAuditRecord == 3">
          <view class="main-title"></view>
          <view class="flex justify-between">
            <text class="left-title">驳回原因</text>
            <text class="right-price" v-if="orderInfo.orderAuditRecord">
              ￥{{ orderInfo.orderAuditRecord ? orderInfo.orderAuditRecord.remark : '' }}
            </text>
          </view>
        </view>
        <view class="main-box">
          <view class="main-title">退房费用</view>
          <view class="flex justify-between">
            <text class="left-title">退款金额</text>
            <text class="right-price">￥{{ orderInfo.refundAmount || 0 }}</text>
          </view>
          <view class="flex justify-between" v-if="orderInfo.couponPrice">
            <text class="left-title">优惠券</text>
            <text class="right-price" style="color: #E0001B;">-￥{{ orderInfo.couponPrice }}</text>
          </view>
        </view>
        <view class="main-box">
          <view class="main-title">退房信息</view>
          <view class="flex justify-between">
            <view class="left-title">入离日期</view>
            <view class="right-text">{{ orderInfo.checkInTime|formatDate('MM月dd日') }} -
              {{ orderInfo.checkOutTime|formatDate('MM月dd日') }}
            </view>
          </view>
          <view class="flex justify-between">
            <view class="left-title">入住天数</view>
            <text class="right-text">{{ subDay }}晚</text>
          </view>
          <view class="flex justify-between" v-if="orderInfo.checkOutOrder">
            <view class="left-title">退房单号</view>
            <text class="right-text">{{ orderInfo.checkOutOrder ? orderInfo.checkOutOrder.checkOutOrderId : '' }}</text>
          </view>
          <view class="flex justify-between">
            <view class="left-title">申请时间</view>
            <text class="right-text">{{ orderInfo.createTime }}</text>
          </view>
        </view>
      </template>
      <template v-if="type==2">
        <view class="main-box">
          <view class="main-title">补缴费用</view>
          <view class="flex justify-between">
            <text class="left-title">补缴金额</text>
            <text class="right-price">￥{{ orderInfo.supplementaryPayment }}</text>
          </view>
        </view>
        <view class="main-box">
          <view class="main-title">退房信息</view>
          <view class="flex justify-between">
            <view class="left-title">退房单号</view>
            <text class="right-text">{{ orderInfo.checkOutOrder.checkOutOrderId }}</text>
          </view>
          <view class="flex justify-between">
            <view class="left-title">退房时间</view>
            <text class="right-text">{{ orderInfo.checkOutOrder.checkOutTime }}</text>
          </view>
          <view class="flex justify-between">
            <view class="left-title">验房时间</view>
            <text class="right-text">{{ orderInfo.checkOutOrder.inspectionTime }}</text>
          </view>
          <view class="flex justify-between" v-if="orderInfo.checkOutOrder && orderInfo.checkOutOrder.payTime">
            <view class="left-title">付款时间</view>
            <text class="right-text">{{ orderInfo.checkOutOrder.payTime }}</text>
          </view>
        </view>
      </template>


    </view>
    <view class="container-bottom">
      <view v-if="orderInfo.checkOutOrder.refundOrderState==='5'" class="bottom-box flex justify-between align-center">
        <!--        <view class="left-text" @click="cancelPay">取消订单</view>-->
        <button class="btn" @click="toPay">立即支付</button>
      </view>
      <!--      <view v-if="['105','290','108'].includes(orderInfo.orderState)"-->
      <!--            class="bottom-box flex justify-between align-center">-->
      <!--        <button class="btn" @click="del">删除订单</button>-->
      <!--      </view>-->
      <!--      <view v-if="['103'].includes(orderInfo.orderState)" class="bottom-box flex justify-between align-center">-->
      <!--        <button class="btn" @click="cancelOrder">取消预订</button>-->
      <!--      </view>-->
    </view>

  </view>
</template>

<script>
import {
  getInfoByUser,
  cancelledOrder,
  deletedOrder,
  checkCancelReservation,
  orderPay,
  //
  getRefundInfoByUser, supplementaryPayment
} from '@/api/order';
import {
  DateDiff,
} from '@/utils/time.js'

export default {
  dicts: ["order_short_state", "audit_process", "refund_order_state"],
  data() {
    return {
      orderId: '',
      orderInfo: {},
      type: '',
      stateTip: [{
        state: '101',
        stateText: '待付款',
        title: '您有一笔待支付金额，请及时付款'
      }, {
        state: '104',
        stateText: '退订中',
        title: '感谢您的信任，房东正在加急处理中'
      },
        {
          state: '105',
          stateText: '退订成功',
          title: '欢迎下次入住'
        },
        {
          state: '105',
          stateText: '退订成功',
          title: '欢迎下次入住'
        }],
      typeText: ['退订', '退房', '补缴']
    }
  },
  onLoad(options) {
    this.orderId = options.orderId;
    this.type = options.type;
    if (this.type) {
      uni.setNavigationBarTitle({
        // title: this.type == 2 ? '补缴详情' : '退订详情'
        title: this.typeText[this.type] + '详情'
      })
    }
    //this.getInfo();
  },
  onShow() {
    this.getInfo();
  },
  computed: {
    subDay: {
      get() {
        return DateDiff(this.orderInfo.checkInTime, this.orderInfo.checkOutTime)
      },
      set() {

      }

    },

  },
  methods: {
    callPhone() {
      uni.showActionSheet({
        itemList: [this.orderInfo.housingAllocation.contactPhone],
        success: res => {
          uni.makePhoneCall({
            phoneNumber: this.orderInfo.housingAllocation.contactPhone
          })
        },
        fail: function (res) {
          console.log(res.errMsg);
        }
      });
    },
    toMap() {
      uni.openLocation({
        latitude: this.orderInfo.latitude,
        longitude: this.orderInfo.longitude,
        name: '房源位置',
        address: this.orderInfo.premisesAddress,
      })
    },
    tipFormater(state) {
      console.log(state);
      let data = this.stateTip.find(item => {
        return item.state == state
      })
      return data ? data.title : ''
    },
    getInfo() {
      getRefundInfoByUser(this.orderId).then(res => {
        let data = res.data;
        data.apartmentPictureList = data.housingAllocation.apartmentPicture.split(',')
        this.orderInfo = data;
      })
    },
    del() {
      uni.showModal({
        title: '确认删除订单',
        content: '删除后数据无法恢复，确认删除订单？',
        success: res => {
          if (res.confirm) {

            deletedOrder(this.orderId).then(res => {
              uni.showToast({
                title: '删除成功'
              })
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            })
            console.log('用户点击确定');
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    cancelOrder() {
      checkCancelReservation(this.orderId).then(res => {
        uni.navigateTo({
          url: `/pages/main/order/cancelOrder?orderId=${this.orderId}`
        })
      })
    },
    cancelPay() {
      uni.showModal({
        title: '确认取消订单',
        content: '确认后将无法进行订单支付，确认取消订单？',
        success: res => {
          if (res.confirm) {
            cancelledOrder(this.orderId).then(res => {
              uni.showToast({
                title: '取消成功',
                success: () => {
                  this.getInfo();
                }
              })
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    toPay() {
      let data = {
        orderId: this.orderId,
        openId: this.$store.state.user.userInfo.openid
      }
      supplementaryPayment(data).then(res => {
        let option = res.data;
        wx.requestPayment({
          timeStamp: option.timeStamp + "",
          nonceStr: option.nonceStr,
          package: option.package,
          signType: 'MD5',
          paySign: option.paySign,
          success: (success) => {
            uni.showToast({
              title: '支付成功',
              icon: 'success',
            })
            setTimeout(() => {
              this.$tab.navigateTo('/pages/main/order/paySuccess?orderId=' + this.orderId + '&type=' + this.type + '&orderType=2')
              this.getInfo();
            }, 1000)
          },
          fail(err) {
            console.log('err', err);
            uni.showToast({
              title: '你已取消支付！',
              icon: 'none',
            })

          }
        })
      })
    },
  }
}
</script>

<style lang="scss">
.container-info {
  margin-bottom: 30rpx;
}

.container-bottom {
  height: 124rpx;
  width: 100vw;
}

.state-title {

  font-weight: 800;
  font-size: 44rpx;
  color: #000000;
  margin-top: 30rpx;
  margin-left: 30rpx;
}

.state-tip {

  font-weight: 500;
  font-size: 24rpx;
  color: #595959;
  margin-left: 30rpx;


}

.house-box {
  margin-top: 24rpx;

  .btn-box {
    width: 298rpx;
    height: 68rpx;
    background: #FFFFFF;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    border: 2rpx solid #C1C1C1;
    font-weight: 500;
    font-size: 24rpx;
    color: #111111;
    line-height: 68rpx;
    text-align: center;

    image {
      width: 34rpx;
      height: 34rpx;
      margin-right: 2rpx;
    }
  }

  .house-title {

    font-weight: 800;
    font-size: 28rpx;
    color: #111111;
    margin-bottom: 18rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tip-title {
    font-weight: 400;
    font-size: 24rpx;
    color: #757575;
  }

  .house-img {
    width: 132rpx;
    height: 132rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-right: 18rpx;
  }

  .house-box-right {
    width: 480rpx;
  }

}

.main-box {
  width: 690rpx;
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  margin-left: 30rpx;
  padding: 20rpx 30rpx;
}

.main-title {

  font-weight: 800;
  font-size: 36rpx;
  color: #000000;


  margin-bottom: 30rpx;
}

.left-title {
  width: 112rpx;

  font-weight: 500;
  font-size: 28rpx;
  color: #666666;


  margin-bottom: 30rpx;

  text {
    width: 100%;
    text-align: justify;
    text-align-last: justify;
  }
}

.right-text {

  font-weight: 800;
  font-size: 28rpx;
  color: #111111;
  text-align: right;


}

.right-price {

  font-weight: 800;
  font-size: 26rpx;
  color: #111111;


}

.bottom-box {
  width: 750rpx;
  height: 124rpx;
  background: #FFFFFF;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  box-sizing: content-box;
  padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
  padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2
  .btn {
    width: 222rpx;
    height: 88rpx;
    background: #FF7947;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;
    line-height: 88rpx;
    text-align: center;


    margin-right: 30rpx;

  }

  .left-text {

    font-weight: bold;
    font-size: 30rpx;
    color: #111111;
    text-decoration-line: underline;
    margin-left: 30rpx;
  }

}
</style>
